<template>
  <div class="app">
    <div class="Customize_head">
      <Customize_head />
    </div>
    <div class="box">
      <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
      <div style="background-color: #545a5b;width: 100%;height: 2px;margin-top: 2px;"></div>
      <div>
        <div class="kongzhi">
          <div class="car" style="">车辆 :</div>
          <div class="xila">
            <el-dropdown @command="clickItem">
              <el-button type="primary" class="xilabi">
                {{ clientId }}<el-icon class="el-icon--right"></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu v-for="item in list">
                  <el-dropdown-item :command="item.clientId">{{ item.clientId
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="buttons">
        <div class="play">
          <el-button type="success" class="plays" display>开始播放</el-button>
        </div>
        <div class="list">
          <el-button type="success" class="loads" @click="getCarlist">重新加载</el-button>
        </div>
      </div>
      <div style="background-color: #545a5b;width: 100%;height: 2px;clear: both;margin-bottom: 2px;"></div>
      <div style="background-color: #545a5b;width: 100%;height: 2px;clear: both;"></div>
   
    <div class="left_bottom">
      <dv-border-box-11 title="终端操作">

      </dv-border-box-11>
    </div>
  </div>
    <div class="right_top">
      <dv-border-box-11 title="终端信息">

      </dv-border-box-11>
    </div>
  </div>
</template>
  
<script>
import api from "@/api/api";
import Customize_head from "@/components/video/Customize-head";

export default {
  components: { Customize_head },

  props: {

  },
  data: function () {
    return {
      clientId: "",
      list: ""
    }
  },
  mounted() {
    this.getCarlist();
  },
  methods: {
    getCarlist() {
      api.getCarsList().then(res => {
        this.list = res;
        this.clientId = res[0].clientId;
        this.$emit("clientId", this.clientId)
      }).catch(err => {
        console.log(err)
      })
    },
    clickItem(val) {
      this.clientId = val;
      this.$emit("clientId", this.clientId)
    }
  }

}

</script>
<style scoped>
.right_top{
  width: 75%;
  float: right;
  height: 92vh;
  margin-top: 10px;
  margin-left: 1%;
}
.left_bottom {
  width: 100%;
  height: 83vh;
  margin-top: 10px;
  margin-left: 1%;
  text-align: center;
  float: left;
}

.Customize_head {
  height: 5vh;
  width: 100%;
}

.app {

  height: 100vh;
  background-image: url("../assets/img/pageBg.png");
}

.box {
  width: 25%;
  height: 2%;
  float: left;
}

:deep(.el-button) {
  border: #01b2c5;
  color: white;
}

.loads {
  background-color: #01b2c5;
}

.plays {
  background-color: #01b2c5;
}

.car {
  /* color:green; */
  text-align: center;
  float: left;
  line-height: 60px;
  background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box {
  margin-top: 20px;
  margin-left: 1%;
  width: 22%;
  height: 75px;
  background-color: #111010;
}

.kongzhi {
  margin-left: 10px;
  line-height: 60px;
}

.xila {
  float: left;
  text-align: center;
  height: 60px;
}

.xilabi {
  line-height: 60px;
  margin-left: 10px;
  margin-top: 15px;
  width: 140px;
  background-color: #333736;
}

.el-button--primary {
  --el-button-border-color: #333736;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.buttons {
  margin-left: 10px;
  float: left;
  text-align: center;
  height: 60px;
}

.play {
  line-height: 60px;
  width: 100px;
  float: left;
}

.list {
  width: 100px;
  float: left;
  line-height: 60px;
}</style>




  